<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/zeroModal.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/paging.js"></script>
    <script src="js/zeroModal.min.js"></script>
    <script src="js/base.js"></script>
    <title>Document</title>
    <style>
        .page_div {
				margin-top: 20px;
				margin-bottom: 20px;
				font-size: 15px;
				font-family: "microsoft yahei";
				color: #666666;
				margin-right: 10px;
				padding-left: 20px;
				box-sizing: border-box;
			}
			/*
			 * 页数按钮样式
			 */
			
			.page_div a {
				min-width: 30px;
				height: 28px;
				border: 1px solid #dce0e0!important;
				text-align: center;
				margin: 0 4px;
				cursor: pointer;
				line-height: 28px;
				color: #666666;
				font-size: 13px;
				display: inline-block;
			}
			
			#firstPage,
			#lastPage {
				width: 50px;
				color: #0073A9;
				border: 1px solid #0073A9!important;
			}
			
			#prePage,
			#nextPage {
				width: 70px;
				color: #0073A9;
				border: 1px solid #0073A9!important;
			}
			
			.page_div .current {
				background-color: #0073A9;
				border-color: #0073A9;
				color: #FFFFFF;
			}
			
			.totalPages {
				margin: 0 10px;
			}
			
			.totalPages span,
			.totalSize span {
				color: #0073A9;
				margin: 0 5px;
			}

        table{
            margin:20px;
            border-collapse: collapse;
            width: 940px;
        }
        tr td{
            border:1px solid #ccc;
            font-size:16px;
            padding:2px 10px;
        }
        .list{
            display:flex;
            margin-top:20px;
        }
        
        .list span{
            border:1px solid #666;
            color:#000;
            padding:4px 10px;
            margin-left:20px;
            cursor: pointer;
        }.seach{
            display: flex;
            margin-top:20px;
        }
        .seach input{
            border:none;
            outline: none;
            width:100px;
        }
        .seach div{
            margin-left:15px;
        }
        .seach b{
            font-weight:normal;
            border-bottom: 1px solid #000;
        }
        .btn_sh{
            border:none;
            outline:none;
            border:1px solid #666;
            background:#fff;
            padding:2px 5px;
            cursor: pointer;

        }
    </style>
</head>
<body>
    <div style="height: 100%">
        <div class="seach">
            <div>
                <span>搜索:</span>
                <b>
                    <input class="sou_vl" type="text">
                </b>
            </div>
            <div>
                <select class="state">
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                </select>
            </div>
            <div>
                <select>
                    <option value="">用户类型</option>
                </select>
            </div>
            <div>
                <span>注册时间段</span>
                <b>
                    <input type="text">
                </b>
            </div>
            <div>
                <button class="btn_sh">搜索</button>
            </div>
        </div>
        <div class="list" >
            <span class="dis">开启禁用</span>
            <span class="endis">取消禁用</span>
            <span class="del">删除</span>
        </div>
        <div style="height:100%">
            <table>
                <thead>
                    <tr>
                        <td>选择</td>
                        <td>id</td>
                        <td>是否禁用</td>
                        <td>账号</td>
                        <td>角色id</td>
                        <td>昵称</td>
                        <td>email</td>
                        <td>最后一次登录ip</td>
                        <td>最后一次登录时间</td>
                    </tr>
                </thead>
                <tbody class="user_list">
                </tbody>
            </table>
            <div class="page_fen">
                <div value="1 0"></div>
                <div id="page" class="page_div"></div>
            </div>
        </div>
    </div>
</body>
<script src="js/user_list_app.js"></script>
</html>